const sdsPageNav = {
    props: {
        /**
         * 页面菜单集合(jsonArray)
         * 当同一页面(比如数据页面)在多处(左侧不同的菜单下)使用时，带href属性的code要唯一，在目标页面可以当做条件来获取不同的配置数据(如：数据页面的API地址集合)
         */
        items: {
            type: Array,
            default: () => [
               /*
                // 无子菜单
                {
                    name: '模板',
                    href: './c.html?v=1',
                    code: 'template'
                },
                // 有子菜单(主菜单不能配置href)
                {
                    name: '各大洲',
                    code: "gdz",
                    childs: [
                        {
                            name: '分析',
                            href: './a.html?v=2',
                            code: 'gdzfx', // 导航code，不能重复（导航页面没有重复的可以去除，不推荐）
                        },
                        {
                            name: '数据',
                            href: './b.html?v=3',
                            code: 'gdzsj'
                        },
                    ],
                }
                */
            ]
        },
        /**
         * 菜单激活项(即：选中高亮)
         */
        activeCode: {
            type: String
        },
        /**
         * 子菜单激活项(即：选中高亮)
         */
        activeChildCode: {
            type: String
        },
        //以下为不同页面的扩展项（如：下拉框、单选按钮等）
        /**
         * 左侧下拉列表
         */
        selectItems: {
            type: Object,
            default: () => [
                /*
                change触发时页面跳转 >> 配置href属性(值为非空时按预定目标跳转，否则使用当前URL配置菜单项目进行跳转): 
                   {label:"国际",value:1,href:"./e.html?v=2"},
                   {label:"国内",value:2,href:"./d.html?v=2"}
                change触发时发送change消息 >> 不能配置href:
                   {label:"国际",value:1},
                   {label:"国内",value:2}
                */
            ]
        },
    },
    data() {
        return {
            selectValue: '',
            //主菜单激活项(优先提取URL中的参数，再取默认值)
            paramItemCode: MACRO_VARIABLE.CURRENTURL_PARAM("itemCode") || this.activeCode,
            //子菜单激活项(优先提取URL中的参数，再取默认值)
            paramChildItemCode: MACRO_VARIABLE.CURRENTURL_PARAM("childItemCode") || this.activeChildCode,
        };
    },
    created() {
        //页面的扩展项设置默认值为第一个选项（如：下拉框、单选按钮等）
        let value = MACRO_VARIABLE.CURRENTURL_PARAM("selectValue")
        let matchObj = {};
        if (!value) {
            if (this.selectItems && this.selectItems.length) {
                matchObj=this.selectItems[0];
                value = matchObj['value'];

            }
        }else{
             matchObj = this.selectItems.find(item => item.value == value);
        }
        this.selectValue = value;
        this.$emit("change", matchObj);
    },
    computed: {
        /**
         * 当前激活的主菜单
         * @returns 
         */
        currentItem() {
            if (this.paramItemCode) {
                let matchObj = this.items.find(item => item.code == this.paramItemCode);
                return matchObj || {}
            }
            return {};
        }
    },
    methods: {
        /**
         * 主菜单click事件
         * @param {*} item 
         */
        itemClick(item) {
            if (item.hasOwnProperty("childs")) {
                //默认获取第一个子项
                let childItems = item.childs;
                if (childItems && childItems.length) {
                    let childItem = childItems[0];
                    if (item.code == this.paramItemCode && childItem.code == this.paramChildItemCode) {
                        return;
                    }
                    location.href = this.$aHrefHandle(childItem.href, { itemCode: item.code, childItemCode: childItem.code, selectValue: this.selectValue, useCacheActive: true });
                }
            } else {
                if (item.code == this.paramItemCode) {
                    return;
                }
                location.href = this.$aHrefHandle(item.href, { itemCode: item.code, selectValue: this.selectValue, useCacheActive: true });
            }
        },
        /**
         * 子菜单click事件
         * @param {*} childItem 
         */
        childItemClick(childItem) {
            if (this.currentItem.code == this.paramItemCode && childItem.code == this.paramChildItemCode) {
                return;
            }
            location.href = this.$aHrefHandle(childItem.href, { itemCode: this.currentItem.code, childItemCode: childItem.code, selectValue: this.selectValue, useCacheActive: true });
        },
        /**
         * 页面的扩展项 >> 下拉框change事件
         */
        changeHandle(value) {
            //获取change后的选项
            let matchObj = this.selectItems.find(item => item.value == value);
            if (matchObj) {
                //检查是否配置的href属性; true: 进行业务处理 如果最终的目标url地址还是为空时与false相同处理，false:发送change消息事件
                if (matchObj.hasOwnProperty("href")) {
                    let targetHref = matchObj.href;
                    //href属性非空
                    if (targetHref) {
                        let param = { selectValue: this.selectValue, useCacheActive: true };
                        matchObj.itemCode && (param['itemCode'] = matchObj.itemCode);
                        matchObj.childItemCode && (param['childItemCode'] = matchObj.childItemCode);
                        location.href = this.$aHrefHandle(targetHref, param);
                        return;
                    }

                    //href属性为空，采用当前URL地址与主或子菜单匹配
                    let locationHref = location.href;
                    //匹配主菜单href是否在当前URL中
                    targetHref = this.currentItem.href.replace(/[.]+[/]/g, "");
                    if (locationHref.indexOf(targetHref) != -1) {
                        location.href = this.$aHrefHandle(this.currentItem.href, { itemCode: this.paramItemCode, childItemCode: this.paramChildItemCode, selectValue: this.selectValue, useCacheActive: true });
                        return;
                    }

                    //如有子菜单，将匹配子菜单href是否在当前URL中
                    if (this.currentItem.hasOwnProperty("childs")) {
                        let matchItem = this.currentItem.childs.find(item => locationHref.indexOf(item.href.replace(/[.]+[/]/g, "")) != -1);
                        if (matchItem) {
                            location.href = this.$aHrefHandle(matchItem.href, { itemCode: this.paramItemCode, childItemCode: this.paramChildItemCode, selectValue: this.selectValue, useCacheActive: true });
                            return;
                        }
                    }
                }
                this.$emit("change", matchObj);
            }
        }
    },
    template: `<div class="tp-page-nav" :style="{ 'justify-content': ($slots['left'] || selectItems.length) ? 'center' : 'initial' }">
         <slot name="left">
             <el-select v-if="selectItems.length" v-model="selectValue" placeholder="请选择" class="header-left" @change="changeHandle">
                <el-option v-for="(item, index) in selectItems" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </slot>
        <div class="nav-list primary-nav-list">
            <a v-for="(item, index) in items" :key="item.code" class="nav" :class="{active: item.code == paramItemCode, visibility:item.hide}" @click="itemClick(item)">{{item.name}}</a>
        </div>
        <div class="nav-list secondary-nav-list">
            <template v-for="(item, index) in currentItem.childs">
                <span :key="item.code" v-if="index !== 0" class="separator">|</span>
                <a :key="item.code" class="nav" :class="{ active: item.code == paramChildItemCode}" @click="childItemClick(item)">{{item.name}}</a>
            </template>
        </div>
    </div>`,
};

Vue.component('tp-page-nav', sdsPageNav);
